<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-button
          type="primary"
          size="small"
          class="btn"
          @click="bufferr.formBuffer = true"
          >添加</el-button
        >
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="small" class="btn">批量删除</el-button>
      </el-col>
    </el-row>

    <TableData
      :tableData="tableData"
      :cellStyle="cellStyle"
      @edit="editRole"
      @remove="removeRole"
    ></TableData>
    <formData
      ref="formRole"
      :tableData="tableData"
      :bufferr="bufferr"
      @channel="getTableData"
    ></formData>
  </div>
</template>

<script>
import TableData from "./components/list";
import formData from "./components/form";
export default {
  components: { TableData, formData },
  data() {
    return {
      tableData: [],
      bufferr: {
        formBuffer: false,
      },
      cellStyle: { background: "#FF6040", color: "white", height: "50px" },
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    getTableData() {
      this.$api
        .reqGetRole()
        .then((res) => {
          // console.log("数据是：", res);
          this.tableData = res;
        })
        .catch((err) => console.log(err));
    },
    // 编辑菜单数据
    editRole(info) {
      // 1.解构获取待修改数据的下标和内容
      let { index, row } = info;
      // 2.将待修改的数据赋值给表单 delete()删除对象中的某些属性  object.defineProtype('存储描述符')
      delete row.children;
      this.$refs.formRole.form = JSON.parse(JSON.stringify(row));
      // 3.弹起表单
      this.bufferr.formBuffer = true;
    },
    removeRole(info) {
      //    this.$api.reqRemoveRole
      let { row, index } = info;

      this.$confirm("此操作将永久删除该数据, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            let res = await this.$api.reqRemoveRole({ id: row.id });
            console.log(res);
            this.tableData = res;
          } catch (error) {
            console.log(error);
          }
          this.$message({
            type: "warning",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.btn {
  width: 80px;
  height: 30px;
  margin-top: 20px;
}
</style>